<template>
  <div class="main-container">
    <div id="signup">
      <div class="fileup">
        <input type="file" :value="creditImg">
        <mt-button type="default" size='normal'>选择文件</mt-button><span>身份证人像（正面）图片</span>

      </div>

      <mt-field label="" placeholder="姓名" type="password" v-model="signupData.name"></mt-field>
      <mt-field label="" placeholder="身份证号" type="text" v-model="signupData.creditCard"></mt-field>
      <mt-field label="" placeholder="手机号" type="text" v-model="signupData.phone"></mt-field>
      <mt-field label="" placeholder="密码" type="password" v-model="signupData.password"></mt-field>
      <mt-field label="" placeholder="推荐人" type="text" v-model="signupData.recommendId"></mt-field>
      <mt-field label="" placeholder="安置人" type="password" v-model="signupData.settleId"></mt-field>
      <mt-radio
        title="选区"
        v-model="positionTem"
        :options="['左区', '右区']">
      </mt-radio>
      <mt-button type="default" size='large'>注册</mt-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'signup',
  data() {
    return {
      signupData: {
        creditCard: '',
        name: '',
        phone: '',
        password: '',
        recommendId: '',
        settleId: '',
        position: ''
      },
      positionTem: '',
      creditImg: ''
    }
  },
  watch: {
    positionTem() {
      this.signupData.position = this.positionTem == '左区'? 'left' : 'right'
    }
  }
}
</script>
<style lang="less" scoped>
.main-container{
  background-color: #2d3a4b;
  justify-content: center;
}
.mint-field{
  margin-bottom: 10px;
}
.mint-radiolist{
  margin-bottom: 10px;
}
#signup{
  padding: 0 10px;
}
.fileup{
  height: 48px;
  position: relative;
  input{
    position: absolute;
    z-index: 1000;
    opacity: 0;
    height: 100%;
    width: 100%;
  }
  span{
    color: #fff;
    margin-left: 10px;
  }
}
</style>
